<template>
  <div class="box">

    <Feedback :obj="feedback"></Feedback>
    <main class="box_main">
      <nav class="n_vl">
        <div>
          <span class="xm_cart">购物车</span><router-link to="/addresspage"><span class="xm_ress"><van-icon
                name="location-o" />华北七鲜云超</span></router-link>
        </div>
        <span class="xm_del" @click="alldel">删除</span>
      </nav>

      <div class="paren_l">
        <van-pull-refresh v-model="isLoading" @refresh="onRefresh">
          <div class="an_img">
            <van-empty v-if="!list.length" class="custom-image" image-size="90"
              image="https://img0.baidu.com/it/u=3172117650,1932372929&fm=253&fmt=auto&app=138&f=JPEG?w=500&h=500"
              description="购物车是空的，快去挑选商品吧~" />
          </div>
          <div v-for="item in list" :key="item.cardId" class="formlist">
            <input type="checkbox" v-model="item.check" @change="che_bln(item)">
            <img style="height: 70px;width: 70px;margin-left: 25px;margin-top: 5px;" :src="item.img" alt="">
            <div class="tit_l">
              <div>
                <div>{{ item.proname }}</div>
                <div><span class="plain_l">{{ item.gettime }}</span></div>
              </div>
              <div style="display: flex;justify-content: space-between;">
                <span>￥{{ item.price + '/' + item.unit }}</span>
                <span><van-stepper v-model="item.num" theme="round" button-size="16" disable-input
                    @change="change(item)" /></span>
              </div>

            </div>

          </div>
          <h5 class="fais_g">
        为<span class="flas_g">·</span>你<span class="flas_g">·</span>推<span class="flas_g">·</span>荐
        <div class="flaa_g">GUESS&nbsp;&nbsp;YOU&nbsp;&nbsp;WlLL&nbsp;&nbsp;lLKE</div>
      </h5>
   
      <List :list="unlist"></List>
        </van-pull-refresh>
      </div>
    </main>

    <footer class="box_foot">
      <van-submit-bar :price="nupro.price" :button-text="'去结算' + '(' + nupro.nums + ')'" @submit="onSubmit">
        <van-checkbox v-model="checked" @click="checkall">全选</van-checkbox>
        <template #tip>
          你的收货地址不支持同城送, <router-link to="/addresspage"><span>修改地址</span></router-link>
        </template>
      </van-submit-bar>
    </footer>
    <Payment :shows="shows" :nupro="nupro" :addresss="addresss"></Payment>
    <van-popup v-model="showtr">
    <div>是否删除</div>
    <van-button type="primary" @click="delcart">删除选中商品</van-button>
    </van-popup>
  </div>
</template>

<script>
import List from '@/components/list.vue'
import Feedback from '@/components/feedback.vue'
import axios from 'axios'
import Payment from './payment.vue'
import Cart from '@/api/cart'
export default {
  activated (){
    this.addresss.address = this.$store.state.address
  },
  components: {
    List,
    Feedback,
    Payment
  },
  mounted() {
    
    //是否显示弹出层
    this.shows.show = JSON.parse(sessionStorage.getItem('bln'))
    //地址
    this.addresss.address = this.$store.state.address

    if(JSON.parse(localStorage.getItem('cartbln'))){
      this.cat()
      localStorage.setItem('cartbln',false)
    }else{
      this.$store.state.checklis.length ? this.list = this.$store.state.checklis : this.cat()
    this.list.length == this.list.filter(item => item.check).length ? this.checked = true : ''
    }
    //判断是否有购物车存值
   

    this.load()
    this.priceadd()
    console.log(this.list);
    this.nupro.lis = this.list.filter(item=>item.check)
  },
  data() {
    return {
      addresss:{
        address:{},
      },
      shows: {
        show2: false,
        show: false,
        checked: false,
      },
      checked: false,
      isLoading: false,
      nupro:{
        nums: 0, price: 0,lis:[]
      },
      showtr:false,
      feedback: {
        title: '我觉得购物车的效率很高?',
        describe: '您对首页不满意的原因有哪些？',
        list: [
          {
            title: '顶部促销容易忽视的问题',
            check: false
          },
          {
            title: '铁石心肠不好吞咽的问题',
            check: false
          },
          {
            title: '秋天的第一杯农药有毒',
            check: false
          },
          {
            title: '我们的凉拌铁石心肠新产品不满意',
            check: false
          },
          {
            title: '秋天的第一杯农药还有农药残留问题',
            check: false
          },
          {
            title: '铁石心肠是仿制产品',
            check: false
          },
          {
            title: '定制明天太过美好，已经戒不掉问题',
            check: false
          },
          {
            title: '荆棘烤肉太扎嘴问题',
            check: false
          },
          {
            title: '荆棘烤肉医药赔偿相关问题',
            check: false
          },
          {
            title: '购买明天时间停止一天被骗问题',
            check: false
          },
        ]
      },
      unlist: [
        {
          id: 1,
          img: 'https://t7.baidu.com/it/u=760837404,2640971403&fm=193&f=GIF',
          title: '澳门永辉传统蛋卷200g',
          notes: '预计明日达',
          price: '29.00',
          unit: '盒',
          cheap: '满99减20',
          describe: '天然果香|清甜爽口|100%果汁',
          primary: '34.00'
        },
        {
          id: 2,
          img: 'https://t7.baidu.com/it/u=797003763,323650745&fm=193&f=GIF',
          title: '澳门永辉传统蛋卷200g',
          notes: '预计明日达',
          price: '29.00',
          unit: '箱',
          primary: '34.00'
        },
        {
          id: 3,
          img: 'https://img0.baidu.com/it/u=160733136,1430664583&fm=253&fmt=auto&app=120&f=JPEG?w=1280&h=800',
          title: '澳门永辉传统蛋卷200g',
          notes: '预计明日达',
          price: '29.00',
          unit: '件',
          cheap: '满99减20',
          describe: '天然果香|清甜爽口|100%果汁',
        },
        {
          id: 4,
          img: 'https://img2.baidu.com/it/u=3663632024,2879009838&fm=253&fmt=auto&app=138&f=JPEG?w=746&h=500',
          title: '澳门永辉传统蛋卷200g',
          notes: '预计明日达',
          price: '29.00',
          unit: '盒'
        },
        {
          id: 5,
          img: 'https://p0.itc.cn/images01/20201005/0adb6f9bada54053a66468e5e958870c.jpeg',
          title: '澳门永辉传统蛋卷200g',
          notes: '预计明日达',
          price: '29.00',
          unit: '盒'
        },
      ],
      list: []
    }
  },
  methods: {
    delcart(){
    this.list.map(async (item,index)=>{
        if(item.check){
          let res = await Cart['delcart']({cardId:item.cardId})
          if (index==this.list.length-1) {
            setTimeout(()=>{
              this.cat()
            },1000)
            
          }
        }else{
          if (index==this.list.length-1) {
            setTimeout(()=>{
              this.cat()
            },1000)
          }
        }

      })
      this.showtr = false
      if(this.list.length === 0) this.checked = false
    },
    async cat() {
      let res = await Cart['getClubsList']({ userid: 1 })
      this.list = res.data
      if(this.$store.state.checklis.length>0){
        this.list.map((item,index) =>{
          this.$store.state.checklis.map(ite=>{
            if(ite.cardId == item.cardId){
              item.check = ite.check
            }
          })
        })
      }else{
        this.list.map(item => item.check = false)
      }
   
      this.$store.commit('SET_CHECKALL', this.list)
    },
    async change(item) {
      let res = await Cart['getcartnum']({ userid: 1, proid: item.proid, num: item.num })
      this.$store.commit('SET_CHECKALL', this.list)
      this.priceadd()
    },
    alldel() {
      this.showtr = true
     
    },
    onRefresh() {
      setTimeout(() => {
        this.isLoading = false;
      }, 1000);
    },
    onSubmit() {
      this.nupro.price <= 0 ? '' : this.shows.show = true;
      this.$store.commit('SET_CHECKALL', this.list)
      this.nupro.lis = this.list.filter(item=>item.check)
    },
  
    load() {
      this.nupro.nums = 0
      this.list.map(item => {
        item.check ? this.nupro.nums += item.num : ''
      })
    },
    che_bln(i_check) {

      this.checked = this.list.every((item) => item.check)
      this.load()
      this.priceadd()
      this.$store.commit('SET_CHECKALL', this.list)
    },
    checkall() {

      this.list.map(item => item.check = this.checked)
      this.load()
      this.priceadd()
    },
    priceadd() {
      this.nupro.price = 0
      this.list.map(item => item.check ? this.nupro.price += (item.price * 100 * item.num) : '')
      this.nupro.price > 0 ? this.nupro.price + '00' : ''
    },
    eject() {

    }

  },

}
</script>

<style lang="scss" scoped>
.box {
  position: relative;
  width: 100%;
  height: 100%;
  display: flex;

  flex-direction: column;



  .custom-image {
    border-radius: 6px;
    margin-top: 20px;
  }

  .an_img {
    border-radius: 6px;
    overflow: hidden;
    width: 100%;
    box-sizing: border-box;
    padding: 0 2%;
  }

  .box_main {
    flex: 1;
    overflow-y: hidden;
    background: rgb(245, 245, 245);

    >nav {
      display: flex;
      justify-content: space-between;
      align-items: center;
      font-size: 14px;
      padding: 5px 0;
      background: #fff;

      .xm_cart {
        font-weight: 800;
        display: inline-block;
        padding: 2px 10px;
      }

      .xm_del {
        display: inline-block;
        padding: 2px 10px;
        color: #333;
      }

      .xm_ress {
        display: inline-block;
        padding: 2px 4px;
        background: #eee;
        color: #888;
        border-radius: 7px;
        font-size: 12px;
      }
    }

  }

  .van-submit-bar {
    position: absolute;
  }

  .rit_num {
    display: 'flex';
    align-items: center;

    span.sp {
      display: inline-block;
      padding: 0 3px;
      border-radius: 50%;
      border: 1px solid #000;
    }
  }

  .paren_l {
    height: 100vh;
    background: rgb(245, 245, 245);
    width: 100%;
    box-sizing: border-box;
    padding: 12px 12px;
    font-size: 14px;
    overflow-y: auto;
    padding-bottom: 170px;

    .fais_g {
      text-align: center;
      font-size: 20px;
      margin: 20px 0 20px 0;

      .flaa_g {
        font-size: 16px;
        position: relative;
        bottom: 5px;
        color: rgba($color: #000, $alpha: .1);
      }

      .flas_g {
        color: #aaa;
      }
    }

    .tit_l {
      flex: 1;
      display: flex;
      flex-direction: column;
      justify-content: space-between;
      box-sizing: border-box;
      padding-left: 10px;
    }

    .plain_l {
      font-size: 12px;
      display: inline-block;
      color: rgba($color: #006400, $alpha: .8);
      background: rgba(0, 255, 160, .1);
      padding: 0 1px;
      border-radius: 2px;
      border: 1px solid rgba($color: #006400, $alpha: .8);
    }

    .formlist {
      position: relative;
      width: 100%;
      height: 80px;
      background: #fff;
      box-sizing: border-box;
      padding: 10px 5px 10 0;
      display: flex;
      justify-content: space-between;
      margin: 6px 0;
      border-radius: 4px;

      al img {
        height: 40px;
      }

      input {
        width: 10%;
        position: absolute;
        top: 40%;
        left: 0;
        z-index: 1;
        border-radius: 6px;
      }
    }
  }

  .fixd {
    position: fixed;
    top: 300px;
    right: 0;
  }

  .custom-image {
    background: #fff;
  }
}
</style>